<h4>结构指令</h4>
<pre class="note">
应用功能：针对模板中的元素完成创建删除和迭代操作
应用语法：＜标签 *解构指令名="结构指令表达式|取值  "＞
    取值 = 针对当前解构指令进行调用判断或者功能执行
    结构指令表达式 = 以当前结构指令的固定语法格式，完成指令的功能定义
</pre>
<pre class="note">
1、 ngIf 用于完成指定标签的创建和删除判断
    ngIf=" 用于完成真假判断的值或JS计算结果 "
    如果取值为 JS 的基本数据类型，转换规则完成遵循JS的转换规则
    + 在ngIf的判断条件中
        - 可以直接获取变量
        - 可以通过变量调用内置属性
        - 可以配置条件表达式，逻辑表达式、四则运行、三目运行……
        - 可以通过组件定义JS内置对象的方式，进行内置对象方法的调用
</pre>
<p>flag:{{ flag }}</p>
<input type="button" value="切换flag" (click)="flag=!flag">
<hr>
<p *ngIf=" flag ">用于ngIf的操作标签</p>
<hr>
<p>num: {{ num }} </p>
<input type="button" value="+" (click)="num = num+1">
<input type="button" value="-" (click)="num = num-1">
<p *ngIf="num">用于ngIf的操作标签</p>
<hr>
<p>arr:{{ arr }}</p>
<input type="button" value="赋值arr=[]" (click)="arr=[]">
<p *ngIf="arr">用于ngIf的操作标签</p>
<p *ngIf=" arr.length == 0 ">数组为空</p>
<hr>
<input type="button" value="赋值user={}" (click)=" user={} ">
<p *ngIf=" JSON.stringify(user)=='{}' ">对象为空</p>
<p *ngIf=" JSON.stringify(user)!='{}' ">对象不为空</p>
<hr>
<pre class="note">
2、ngSwitch 完成等值判断操作的 = 该指令为组合指令
    ngSwitchCase 修饰的标签在等值判断自带类似于 JS switch语法的 break 功能
    ngSwitchDefault 是一个 boolean 功能指令
    在固定的元素列表中，根据取值条件完成子元素的选择展示
    语法结构对比
            JS                        angular
    switch(待比较变量)｛        ＜父标签 [ngSwitch]="待比较变量"＞
        case 值：                   ＜子标签 *ngSwitchCase="比较值"＞＜/子标签＞
            表达式;
            break;
        case 值：                   ＜子标签 *ngSwitchCase="比较值"＞＜/子标签＞
            表达式;
            break;
        default:                    ＜子标签 *ngSwitchDefault＞＜/子标签＞
            默认表达式
    ｝                          ＜/父标签＞
</pre>
<p>name:{{name}}</p>
<input type="button" value="name='tom'" (click)=" name='tom' ">
<input type="button" value="name='jacl'" (click)=" name='jack' ">
<input type="button" value="name='随机值'" (click)=" name='asdasdmasldal' ">
<ul [ngSwitch]="name">
    <li *ngSwitchCase=" 'tom' ">tom</li>
    <li *ngSwitchCase=" 'jack' ">jack</li>
    <li *ngSwitchDefault>unknown</li>
</ul>


<p>names:{{ names }}</p>
<ul>
    <li *ngFor=" let name of names; "> {{ name }} </li>
</ul>
<ul>
    <li *ngFor=" let k of getKeys(obj); ">{{k}}:{{obj[k]}}</li>
</ul>
<ul>
    <li>index-value-first-last-even-odd</li>
    <li *ngFor="
        let name of names;
        let i = index;
        let f = first;
        let l = last;
        let o = odd;
        let e = even;
    ">{{i}}-{{name}}-{{f}}-{{l}}-{{e}}-{{o}}</li>
</ul>
    